import { Component } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import Taro from "@tarojs/taro";
/**
 * 
          @className : string  | '确认文本'
          @onConfirm : function | '确认的回调函数' (默认操作一的函数)
          @onCancel : function | '确认的回调函数' (默认操作二的函数)
          @data ：[{
            text: "确认",
            onClick: this.onConfirm.bind(this),
            className: "confirm_style",
          }]  
 */

export { LgSlide, LgSlides };
let _slidesId = 0;
class LgSlides extends Component {
    state = {
        moveLeft: null,
        startX: 0,
        endX: 0,
        moveLength: 0,
        direction: 0,
        domHeight: null,
        maxMoveLeft: 0,
        singleSliderWidth: 160,
        defaultData: [
            {
                text: "确认",
                onClick: this.onConfirm.bind(this),
                className: "confirm_style",
            },
            {
                text: "删除",
                onClick: this.onCancel.bind(this),
                className: "cancel_style",
            },
        ],
        isOpen: false,
        index: 0,
    };
    slideId = "slides_" + _slidesId++;
    componentDidMount() {
        let that = this;
        setTimeout(() => {
            let query = Taro.createSelectorQuery();
            query
                .selectAll(`#${this.slideId}`)
                // .select(this.refs.box)
                .boundingClientRect((res) => {
                    that.setState({
                        domHeight: Taro.pxTransform(parseFloat(res[0].height, 0) * 2),
                    });
                })
                .exec(() => { });
        }, 200);
        let length = 2;
        if (this.props.data) {
            length = this.props.data.length;
        }
        this.setState({
            maxMoveLeft: length * this.state.singleSliderWidth,
        });
    }
    onStart(event) {
        this.setState({
            startX: event.changedTouches[0].screenX || event.changedTouches[0].pageX,
        });
    }
    onMove(event) {
        let state = this.state;
        // 手指点击时的X坐标
        let startX = this.state.startX;
        // 滑动结束时滑块最后的距离
        let endX = this.state.endX;
        // 滑动的到左边的最大距离
        let moveLeft = this.state.moveLeft;
        // 滑动的到左边的最大距离
        let maxMoveLeft = this.state.maxMoveLeft;
        // 单个滑块最大宽度
        let singleSliderWidth = state.singleSliderWidth;
        // 手指横向滑动的X坐标
        let eventMoveX =
            event.changedTouches[0].screenX || event.changedTouches[0].pageX;
        //
        let direction = startX - eventMoveX > 0 ? +1 : -1;
        // 手指横向滑动的距离
        let moveLength = Math.abs(startX - eventMoveX);
        if (moveLength > maxMoveLeft) {
            return;
        }
        let slideMoveLength = 0;
        if (direction > 0) {
            if (endX) {
                return;
            } else {
                slideMoveLength = -moveLength;
            }
        } else {
            if (endX) {
                slideMoveLength = (maxMoveLeft - moveLength) * -1;
            } else {
                return;
            }
        }
        moveLeft = Taro.pxTransform(slideMoveLength);
        this.setState({
            moveLength,
            moveLeft,
            direction,
        });
    }
    onEnd(event) {
        let state = this.state;
        let direction = state.direction;
        let moveLeft = state.moveLeft;
        let maxMoveLeft = state.maxMoveLeft;
        let singleSliderWidth = state.singleSliderWidth;
        let moveLength = state.moveLength;
        let endX = state.endX;
        if (moveLength > singleSliderWidth / 6) {
            if (!endX) {
                endX = maxMoveLeft;
            } else {
                endX = 0;
            }
        } else {
            if (!endX) {
                endX = 0;
            } else {
                endX = maxMoveLeft;
            }
        }
        moveLeft = "-" + Taro.pxTransform(endX);
        this.setState({
            endX,
            moveLeft,
            moveLength: 0,
        });
    }
    onConfirm() {
        this.props.onConfirm && this.props.onConfirm();
    }
    onCancel() {
        this.props.onCancel && this.props.onCancel();
    }
    clickSlideItem(i) {
        this.setState({
            index: i,
        });
    }

    render() {
        let state = this.state;
        let props = this.props;
        let className = props.className || "";
        let data = this.state.defaultData;
        if (props.data) {
            data = props.data;
        }
        return (
            <View id={this.slideId}>
                {this.props.children.map((o, i) => {
                    let canSlide = i == this.state.index ? true : false;
                    return (
                        <LgSlide
                            key={i}
                            canSlide={canSlide}
                            {...o.props}
                            onClickSlide={() => {
                                this.setState({ moveLeft: 0 })
                                this.clickSlideItem(i);
                            }}
                            slideIndex={i}
                        >
                            {o.props.children || ""}
                        </LgSlide>
                    );
                })}
            </View>
        );
    }
}

class LgSlide extends Component {
    state = {
        moveLeft: null,
        startX: 0,
        endX: 0,
        moveLength: 0,
        direction: 0,
        domHeight: null,
        maxMoveLeft: 0,
        singleSliderWidth: 160,
        defaultData: [
            {
                text: "确认",
                onClick: this.onConfirm.bind(this),
                className: "confirm_style",
            },
            {
                text: "删除",
                onClick: this.onCancel.bind(this),
                className: "cancel_style",
            },
        ],
        isOpen: false,
    };

    UNSAFE_componentWillReceiveProps(nextProps) {
        if (this.props.canSlide != nextProps.canSlide) {
            this.setState({
                moveLeft: 0,
            });
        }
    }

    componentDidMount() {
        let that = this;
        setTimeout(() => {
            let query = Taro.createSelectorQuery().in(that);
            query
                .selectAll(".container_slide-box")
                // .select(this.refs.box)
                .boundingClientRect((res) => {
                    that.setState({
                        domHeight: Taro.pxTransform(parseFloat(res[0].height, 0) * 2),
                    });
                })
                .exec(() => { });
        }, 200);
        let length = 2;
        if (this.props.data) {
            length = this.props.data.length;
        }
        this.setState({
            maxMoveLeft: length * this.state.singleSliderWidth,
        });
    }

    onStart(event) {
        this.props.onClickSlide && this.props.onClickSlide();
        this.setState({
            startX: event.changedTouches[0].screenX || event.changedTouches[0].pageX,
        });
    }
    onMove(event) {
        if (!this.props.canSlide) {
            this.setState({
                endX: 0,
                moveLeft: 0,
            });
            return;
        }
        let state = this.state;
        // 手指点击时的X坐标
        let startX = this.state.startX;
        // 滑动结束时滑块最后的距离
        let endX = this.state.endX;
        // 滑动的到左边的最大距离
        let moveLeft = this.state.moveLeft;
        // 滑动的到左边的最大距离
        let maxMoveLeft = this.state.maxMoveLeft;
        // 单个滑块最大宽度
        let singleSliderWidth = state.singleSliderWidth;
        // 手指横向滑动的X坐标
        let eventMoveX =
            event.changedTouches[0].screenX || event.changedTouches[0].pageX;
        //
        let direction = startX - eventMoveX > 0 ? +1 : -1;
        // 手指横向滑动的距离
        let moveLength = Math.abs(startX - eventMoveX);
        if (moveLength > maxMoveLeft) {
            return;
        }
        let slideMoveLength = 0;
        if (direction > 0) {
            if (endX) {
                return;
            } else {
                slideMoveLength = -moveLength;
            }
        } else {
            if (endX) {
                slideMoveLength = (maxMoveLeft - moveLength) * -1;
            } else {
                return;
            }
        }
        moveLeft = Taro.pxTransform(slideMoveLength);
        this.setState({
            moveLength,
            moveLeft,
            direction,
        });
    }
    onEnd(event) {
        let state = this.state;
        let direction = state.direction;
        let moveLeft = state.moveLeft;
        let maxMoveLeft = state.maxMoveLeft;
        let singleSliderWidth = state.singleSliderWidth;
        let moveLength = state.moveLength;
        let endX = state.endX;
        if (moveLength > singleSliderWidth / 6) {
            if (!endX) {
                endX = maxMoveLeft;
            } else {
                endX = 0;
            }
        } else {
            if (!endX) {
                endX = 0;
            } else {
                endX = maxMoveLeft;
            }
        }
        moveLeft = "-" + Taro.pxTransform(endX);
        this.setState({
            endX,
            moveLeft,
            moveLength: 0,
        });
    }
    onConfirm(index) {
        this.props.onConfirm && this.props.onConfirm(this.props.slideIndex || 0);
    }
    onCancel(index) {
        this.props.onCancel && this.props.onCancel(this.props.slideIndex || 0);
    }
    onClickSlide() {
        this.props.onClickSlide && this.props.onClickSlide(this.props.slideIndex);
    }
    render() {
        let state = this.state;
        let props = this.props;
        let className = props.className || "";
        let data = this.state.defaultData;
        if (props.data) {
            data = props.data;
        }
        return (
            <View
                className="container_slide-box"
                onTouchStart={this.onStart.bind(this)}
                onTouchMove={this.onMove.bind(this)}
                onTouchEnd={this.onEnd.bind(this)}
                onClick={this.onClickSlide.bind(this)}
            >
                <View
                    className={"container_slide_box_content"}
                    style={{
                        transform: "translateX(" + state.moveLeft + ")",
                    }}
                >
                    <View className={"container_slide_content " + className}>
                        {this.props.children}
                    </View>
                    <View
                        className="container_slide_option"
                        style={{ height: this.state.domHeight }}
                    >
                        {data.map((o, i) => {
                            return (
                                <View
                                    className={"item " + o.className}
                                    style={{ backgroundColor: o.backgroundColor, color: o.color }}
                                    onClick={() => {
                                        this.setState({ moveLeft: 0 })
                                        o.onClick(this.props.slideIndex || 0);
                                    }}
                                >
                                    {o.text}
                                </View>
                            );
                        })}
                    </View>
                </View>
            </View>
        );
    }
}
